import React, { useEffect } from "react";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import { DetailWrapper, Header, Content } from "./style";
import { actionCreators } from "./store";

function Detail(props) {
    useEffect(() => {
        props.getDetail(props.match.params.id);
    }, []);

    return (
        <DetailWrapper>
            <Header>{props.title}</Header>
            <Content dangerouslySetInnerHTML={{ __html: props.content }} />
        </DetailWrapper>
    );
}

const mapStateToProps = state => ({
    title: state.getIn(["detail", "title"]),
    content: state.getIn(["detail", "content"])
});

const mapDispatchToProps = dispatch => ({
    getDetail(id) {
        dispatch(actionCreators.getDetail(id));
    }
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(Detail));
